<!--
 * @Description: 多边形编辑组件
 * @Autor: Liujm
 * @Date: 2019-11-13 10:36:11
 * @LastEditors: xiej
 * @LastEditTime: 2020-08-11 14:22:40
-->
<template>
  <div class="app-container polygon-editor">
    <app-mapview id="polygon-viewDiv"
                 basemap="IMG"
                 @mapview-loaded="mapviewLoaded" />

  </div>
</template>
<script>
import { loadModules } from 'esri-loader'
import appMapview from '@/components/ItpsMap/AppMapview'

export default {
  components: { appMapview },
  props: {
    geometry: null,
    symbol: null,
    readOnly: { type: Boolean, default: false }
  },
  data() {
    return {
      view: null,
      graphicsLyr: null,
      sketch: null,
      graphic: null
    }
  },

  methods: {
    mapviewLoaded(paramters) {
      this.view = paramters.view
      loadModules([
        'esri/Graphic', 'esri/geometry/Extent', 'esri/layers/GraphicsLayer',
        'esri/widgets/Sketch'
      ], { url: window.MAP_CONFIG().jsapi })
        .then(([
          Graphic, Extent, GraphicsLayer,
          Sketch
        ]) => {
          this.graphicsLyr = new GraphicsLayer()
          this.view.map.add(this.graphicsLyr)
          // 显示现有要素并居中

          if (!this.readOnly) {
            this.sketch = new Sketch({
              layer: this.graphicsLyr,
              view: this.view,
              availableCreateTools: []
            })
            this.sketch.viewModel.polygonSymbol = this.symbol
            this.sketch.on('create', evt => {
              if (evt.state === 'complete') {
                this.graphic = new Graphic({
                  geometry: evt.graphic.geometry,
                  symbol: this.symbol
                })
                // 隐藏新建工具
                this.sketch.availableCreateTools = []
              }
            })
            this.sketch.on('update', evt => {
              if (evt.state === 'complete') {
                this.graphic = new Graphic({
                  geometry: evt.graphics[0].geometry,
                  symbol: this.symbol
                })
              }
            })
            this.view.ui.add(this.sketch, 'top-right')
          }
        })
    },
    redrawGraphic() {
      if (!this.view) return
      // 绘制工具栏上的按钮["point", "polyline", "polygon", "rectangle", "circle"]
      if (this.geometry && this.isPolygon(this.geometry)) {
        this.graphicsLyr.graphics.add({ geometry: this.geometry,
          symbol: this.symbol })
        this.view.goTo(this.geometry)
      } else {
        this.sketch.availableCreateTools = ['polygon']
      }
    },
    isPolygon(geometry) {
      const points = geometry.reduce((result, item) => {
        result.push(...item)
        return result
      }, [])
      return geometry && geometry.length > 0 && points.every(item => typeof item === 'number')
    }
  }
}
</script>
<style scoped="scoped">
    #polygon-viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    }
.polygon-editor{
  height: 100%;
}
</style>
<style lang="scss">
.polygon-editor .esri-sketch__panel>.esri-sketch__tool-section>.esri-icon-pan{
  display: none !important;
}
.polygon-editor .esri-sketch__panel>.esri-sketch__info-section>.esri-icon-trash{
  display: none !important;
}
</style>
